<template>
	<view class="container">
		<HeadNav :title="detailInfo?.cardName" back />
		<view class="card-img">
			<image :src="detailInfo?.fileUrl" webp></image>
		</view>
		<view class="card-content">
			<view class="card-title">{{detailInfo?.cardName}}</view>
			<view class="card-subtitle">{{detailInfo?.cardCode}}</view>
			<view class="tag-list">
				<view class="tag-item">
					<view class="tag-item-left">
						<view class="line"></view>
						<text class="tag-key">类型：</text>
					</view>
					<view class="tag-item-right">
						<text class="tag-value">{{detailInfo?.cardTypeName}}</text>
					</view>
				</view>
				<!-- <view class="tag-item">
					<view class="tag-item-left">
						<view class="line"></view>
						<text class="tag-key">等级：</text>
					</view>
					<view class="tag-item-right">
						<text class="tag-value">{{detailInfo?.cardLevel}}</text>
					</view>
				</view> -->
				<!-- <view class="tag-item">
					<view class="tag-item-left">
						<view class="line"></view>
						<text class="tag-key">费用：</text>
					</view>
					<view class="tag-item-right">
						<text class="tag-value">{{detailInfo?.cost}}</text>
					</view>
				</view> -->
				<!-- <view class="tag-item"
					:class="{'tag-long': detailInfo.flavorText && detailInfo.flavorText.length >=5?true:false}">
					<view class="tag-item-left">
						<view class="line"></view>
						<text class="tag-key">背景：</text>
					</view>
					<view class="tag-item-right">
						<text class="tag-value">{{detailInfo?.flavorText}}</text>
					</view>
				</view> -->
				<!-- <view class="tag-item tag-long">
					<view class="tag-item-left">
						<view class="line"></view>
						<text class="tag-key">主标签：</text>
					</view>
					<view class="tag-item-right">
						<text class="tag-value">{{detailInfo?.mainTags}}</text>
					</view>
				</view> -->
				<view class="tag-item"
					:class="{'tag-long': detailInfo.subTags && detailInfo.subTags.length >=5?true:false}">
					<view class="tag-item-left">
						<view class="line"></view>
						<text class="tag-key">标签：</text>
					</view>
					<view class="tag-item-right">
						<text class="tag-value">{{tagsFormat(detailInfo.subTags)}}</text>
					</view>
				</view>
				<template v-if="detailInfo.displayJsonList && detailInfo.extraData">
					<view class="tag-item"
						:class="{'tag-long': detailInfo.extraData[displayItem.key].length >=5?true:false}"
						v-for="displayItem of detailInfo.displayJsonList" :key="displayItem.key">
						<view class="tag-item-left">
							<view class="line"></view>
							<text class="tag-key">{{displayItem.value}}：</text>
						</view>
						<view class="tag-item-right">
							<text class="tag-value">{{detailInfo.extraData[displayItem.key]}}</text>
						</view>
					</view>
				</template>


				<!-- 	<view class="tag-item tag-long">
					<view class="tag-item-left">
						<view class="line"></view>
						<text class="tag-key">画师：</text>
					</view>
					<view class="tag-item-right">
						<text class="tag-value">{{detailInfo.illusInfo}}</text>
					</view>
				</view> -->
			</view>
			<view class="tag-item-title">
				<view class="result-border result-border-l"></view>
				<text>
				卡牌效果
				</text>
				<view class="result-border"></view>
			</view>
			<view class="effect-text" style="white-space: pre-wrap;">
				{{detailInfo?.illusInfo}}
			</view>
			<view class="tag-item-title">
				<view class="result-border result-border-l"></view>
				<text>所属卡包</text>
				<view class="result-border"></view>
			</view>
			<view class="card-holder">
				<view class="item-holder" @tap="redirectFunc(item.id)" v-for="item of detailInfo.packVOList"
					:key="item.id">
					<image v-if="item.fileUrl" :src="item.fileUrl" class="holder-img"></image>
					<view v-else class="no-image"></view>
					<view class="holder-text">
						{{item.packCode}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		getCardDetails
	} from '@/api/card'
	import HeadNav from '@/components/HeadNav'

	const detailInfo = ref({})
	onLoad(options => {
		console.log('options', options)
		getData(options.id)
	})

	const getData = async (id) => {
		try {
			uni.showLoading({
				title: '正在加载...'
			});
			const res = await getCardDetails(id);
			const extraData = JSON.parse(res.data.extraData)
			detailInfo.value = res.data
			detailInfo.value.extraData = Object.keys(extraData).length > 0 ? extraData : null

			uni.hideLoading()
		} catch (error) {
			console.log(error)
			uni.hideLoading()
			uni.showToast({
				title: '查询卡牌数据失败，请稍后再试',
				icon: 'error'
			})
		}
	}

	const redirectFunc = (id) => {
		uni.navigateTo({
			url: '/pages/product/detail?id=' + id
		});
	}

	const tagsFormat = (tags) => {
		if (tags) {
			return tags.replace(/\|/g, ' ');
		} else {
			return ''
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #E6E6E6;
		// padding: 32rpx 32rpx 0 32rpx;
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		font-family: PingFangSC-Regular, sans-serif;

	}

	.card-img {
		height: 1000rpx;
		padding: 0 32rpx;
		box-sizing: border-box;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.card-content {
		margin-top: 60rpx;
		box-sizing: border-box;
		padding: 0 32rpx;

		.card-title {
			line-height: 66rpx;
			color: #333333;
			font-size: 44rpx;
			text-align: center;
			font-weight: 600;
		}

		.card-subtitle {
			color: #BB9F5E;
			line-height: 40rpx;
			font-size: 28rpx;
			text-align: center;
		}

		.tag-list {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			flex-wrap: wrap;

			.tag-item {
				border: 2rpx solid #DDDDDD;
				border-radius: 12rpx 0 12rpx 0;
				padding: 12rpx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				font-weight: 600;
				width: 45%;
				margin-bottom: 32rpx;

				.tag-item-left {
					display: flex;
				}

				.tag-item-right {
					flex: 1;
					display: flex;
					justify-content: flex-end;
				}

				.line {
					background-color: #AAAAAA;
					border-radius: 10rpx 0 10rpx 0;
					width: 8rpx;
					height: 100%;
				}

				.tag-key {
					margin-left: 16rpx;
					color: #BB9F5E;
					line-height: 44rpx;
					font-size: 32rpx;
					letter-spacing: 4rpx;
				}

				.tag-value {
					color: #333333;
					line-height: 44rpx;
					font-size: 32rpx;
					letter-spacing: 2rpx;
				}
			}

			.tag-long {
				width: 100%;
			}
		}

		.tag-item-title {
			color: #BB9F5E;
			font-size: 32rpx;
			font-weight: 600;
			line-height: 44rpx;
			text-align: center;
			margin-bottom: 16rpx;
			 display: flex;
    justify-content: center;
    align-items: center;
    gap: 16rpx;
	.result-border {
       height: 12rpx;
      width: 180rpx;
      background: url('https://ucp-tcg.com:18001/mc/app/static/searchresult-r.png') no-repeat center;
      background-size: cover;
    }
    .result-border-l {
      transform: rotate(180deg);
    }
		}

		.effect-text {
			border: 2rpx solid #DDDDDD;
			border-radius: 12rpx 0 12rpx 0;
			background-color: #fff;
			padding: 28rpx;
			margin-bottom: 32rpx;
		}

		.card-holder {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;

			.item-holder {
				width: 31%;
				border: 2rpx solid #BB9F5E4D;
				border-radius: 14rpx;
				position: relative;

				.holder-img {
					width: 100%;
					height: 222rpx;
				}

				.no-image {
					width: 100%;
					height: 222rpx;
					background-color: $no-image-color;
				}

				.holder-text {
					position: absolute;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0.7);
					width: 100%;
					color: #BB9F5E;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
					text-align: center;
				}
			}
		}
	}
</style>